<!-- 推荐下载 -->
<template>
    <div class='recommend-download'>
        <van-nav-bar title="推荐下载" left-arrow @click-left="goBack" />
        <div class="box">
            <div class="top1">
                <h2>邀请邻居下载APP</h2>
                <p>享受智能生活</p>
            </div>
            <div class="middle">
                <van-image width="4rem" height="4rem" fit="contain" :src="qrCode" />
                <p>{{appName}}</p>
            </div>
            <!-- <div class="bot">
            <van-divider>更多分享方式</van-divider>
            <van-row>
                <van-col span="6">
                    <van-button type="default"  @click="share">
                        <img src="../assets/img/weixin.png" />
                    </van-button>
                    <span>微信</span>
                </van-col>
                <van-col span="6">
                    <van-button type="default"  @click="share">
                        <img src="../assets/img/pengyou.png" />
                    </van-button>
                    <span>朋友圈</span>
                </van-col>
                <van-col span="6">
                    <van-button type="default"  @click="share">
                        <img src="../assets/img/qq.png" />
                    </van-button>
                    <span>QQ</span>
                </van-col>
                <van-col span="6">
                    <van-button type="default"  @click="share">
                        <img src="../assets/img/weibo.png" />
                    </van-button>
                    <span>微博</span>
                </van-col>
            </van-row>
        </div> -->
        </div>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';

    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                qrCode: require('../assets/img/yunshanfu.jpg'),
                appName: '安平宝'
            };
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            goBack() {
                window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
            },
            share() {
                this.$toast('分享')
            },
            getqrCode() {
                this.$axios.get('/get/getAppVersion', {

                }).then(res => {
                    console.log(res)
                    const { status, data } = res;
                    if (status == 200 && data.code == 200) {
                        this.qrCode = "data:image/jpg;base64," + data.data.qrcode
                    }
                })
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            this.getqrCode()
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {

        },
        beforeCreate() { }, //生命周期 - 创建之前
        beforeMount() { }, //生命周期 - 挂载之前
        beforeUpdate() { }, //生命周期 - 更新之前
        updated() { }, //生命周期 - 更新之后
        beforeDestroy() { }, //生命周期 - 销毁之前
        destroyed() { }, //生命周期 - 销毁完成
        activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='scss' scoped>
    //@import url(); 引入公共css类
    

    .box {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        flex-flow: column;

        .top1 {
            text-align: center;
            padding: 1rem 0;

            h2 {
                font-size: 0.56rem;
                font-weight: 500
            }

            p {
                font-size: 0.32rem;
                margin-top: 0.1rem;
            }
        }

        .middle {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 100%;
            text-align: center;

            p {
                font-size: 0.32rem;
                color: #101010;
            }
        }

        .bot {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding-bottom: 0.6rem;

            .van-col {
                text-align: center;

                .van-button {
                    border-color: #bbb;
                    margin: 0 auto;
                    display: block;
                    border-radius: 50%;
                    width: 0.96rem;
                    height: 0.96rem;
                    padding: 0.24rem;

                    img {
                        display: block;
                        width: 0.48rem;
                        height: 0.48rem;
                    }
                }

                span {
                    display: block;
                    color: #101010;
                }
            }
        }
    }
</style>